<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
      v-for 指令：
          用于展示列表数据
          语法：v-for="(item, index) in xxx" :key="yyy"
          可遍历：数组(常用)，对象，字符串(不常用)，指定次数(不常用)
    -->
    <!-- 准备一个容器 -->
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表(遍历数组) 最常用</h2>
      <ul>
        <li v-for="(p,index) in persons" :key="index">
          {{p.name}} - {{p.age}}
        </li>
      </ul>

      <!-- 遍历对象 -->
      <h2>骑车信息(遍历对象)</h2>
      <ul>
        <li v-for="(value,k) in car" :key="k">
          {{k}} - {{value}}
        </li>
      </ul>

      <!-- 遍历字符串 -->
      <h2>遍历字符串</h2>
      <ul>
        <li v-for="(char,index) in str" :key="index">
          {{char}} - {{index}}
        </li>
      </ul>

      <!-- 遍历次数 -->
      <h2>遍历次数</h2>
      <ul>
        <li v-for="(number,index) in 6" :key="index">
          {{number}} - {{index}}
        </li>
      </ul>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data:{
          persons: [
            {id:'001', name:'张三', age: 18},
            {id:'002', name:'李四', age: 19},
            {id:'003', name:'王五', age: 20},
          ],
          car:{
            name: '奥迪A8',
            price:'70w',
            color:'黑色'
          },
          str:'hello'
        }
    })
</script>
</html>